import _ from 'lodash';
import * as React from 'react';
import {observer} from 'mobx-react';
import {Tree, Form} from 'antd';
import {toJSDeep} from '../../../../common/store/Store';
import './AreaTreeStyle.less';

const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;

@observer
export class AreaTree extends React.Component<any, any>{
    onCheck = (checkedKeys, info) =>{
        this.props.onChange(checkedKeys, info);
    }

    loop = (data) =>{
        return _.map(data, (item) =>{
            if (item.children) {
                return (
                    <TreeNode key={item.key} title={item.label}>
                        { this.loop(item.children) }
                    </TreeNode>
                );
            }
            
            return <TreeNode key={item.key} title={item.label}/>;
        })
    }
    
    render(){
        let { store, treeData, filedName, label, labelCol, wrapperCol } = this.props;
        const visible = store.visible;
        const item = store.fields[filedName];

        return (
            <FormItem className = "areaTree"
                label={label}
                labelCol={labelCol}
                wrapperCol={wrapperCol}
                hasFeedback = {item.hasFeedback}
                required = {item.required}
                help = {item.help}
                validateStatus = {item.validateStatus}>
                {visible ? <Tree
                    checkable
                    onCheck = {this.onCheck}
                    checkedKeys={toJSDeep(_.map(item.value,_.toString))}>
                    {this.loop(toJSDeep(treeData))}
                </Tree> : null}
            </FormItem>
        )
    }
}